<template>
    <div class="dashboard-container">
        <!-- 筛选查询 -->
        <el-form :inline="true">
            <el-form-item label="手机号">
                <el-input placeholder="请输入手机号" v-model="params.phone"></el-input>
            </el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button @click="handleAdd">新增</el-button>
        </el-form>

        <!-- 数据列表 -->
        <el-table :data="list">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="padding-top:30px; text-align: right;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pageIndex+1"
                background
                :page-sizes="[10, 20, 30, 40]"
                :page-size="params.pageCount"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog title="新增号码" :visible.sync="dialogVisible" width="800px">
            <el-form label-width="100px" :model="temp"  :rules="rules" ref="ruleForm">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="temp.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: right;">
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import { forbiddenPhoneCreate, forbiddenPhoneGetList, forbiddenPhoneDelete } from '@/api/forbiddenPhone'
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        list: [],
        params: {
            pageCount: 10,
            pageIndex: 0,
            phone: ''
        },
        total: 0,
        dialogVisible: false,
        temp:{},
        rules: {
            phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        }
      }
    },
    mounted(){
        this.getList();
    },
    methods: {
        //点击新增
        handleAdd(){
            this.temp = { phone: '' };
            this.dialogVisible = true;
        },
        //提交表单
        submitForm(formName){
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    await forbiddenPhoneCreate(this.temp)
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });
                    this.dialogVisible = false;
                    this.getList();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //点击删除
        handleDelete(id){
            this.$confirm('此操作将永久删除该号码, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await forbiddenPhoneDelete({ dataId: id })
                this.getList();
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        async getList(){
            let data = await forbiddenPhoneGetList(this.params)
            this.list = data.data.list;
            this.total = data.data.totalCount;
        },
        //切换数量
        handleSizeChange(val){
            this.params.pageIndex = 0;
            this.params.pageCount = val;
            this.getList();
        },
        //切换页码
        handleCurrentChange(val){
            this.params.pageIndex = val-1;
            this.getList();
        }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
      
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  </style>
  